<!--
 * @Author       : wfl
 * @LastEditors: ww
 * @description  :
 * @updateInfo   :
 * @Date         : 2023-05-08 17:54:20
 * @LastEditTime: 2023-06-30 16:22:05
-->
<script lang="ts" setup name="BaseModalMove">
import { Plus } from '@element-plus/icons-vue'
// import { ElMessage } from 'element-plus'
import { formApi } from '@/MainApp/apis/approve-center'

const props = defineProps({
  data: {
    type: Object,
    default: () => { }
  },
  modelValue: {
    type: Boolean,
    default: false
  },
  type: {
    type: String,
    default: 'group' // group form
  }
})

const emits = defineEmits(['update:modelValue', 'requery'])

const { msgError, msgSuccess } = useMessage()

const loading = ref(false)
const isShow = computed(() => props.modelValue)
const gorupData: Ref<any> = ref([])
const activeGroup = ref('')
const enable = computed(() => props.data?.status !== 'DISABLE')
watch(() => props.modelValue, val => {
  if (val)
    activeGroup.value = props?.data?.groupId
})
const title = computed(() => `将[${props.data?.name}]${!enable.value ? '启用' : '移动'}到...`)

const getGroups = async () => {
  loading.value = true
  const param = {
    initiatorViewOnly: false,
    name: ''
  }
  const { success, data } = await useGroup(param)
  if (success)
    gorupData.value = data
  loading.value = false
}
getGroups()

// param: any
// const handMoveGroup = async () => {
//   loading.value = true
// }

// TODO
// const handleDrop = (
//   draggingNode: Node,
//   dropNode: Node,
//   dropType: NodeDropType
// ) => {
//   const param = {
//     parentId: '',
//     targetParentId: '',
//     currentId: dropNode.data.id,
//     currentOrder: dropNode.data.moveOrder,
//     targetId: draggingNode.data.id,
//     targetOrder: draggingNode.data.moveOrder,
//     position: dropType.toLocaleUpperCase()
//   }
//   handMoveGroup(param)
// }

const groupName = ref('')
const showInput = ref(false)
const handCancelCreat = () => {
  showInput.value = false
  groupName.value = ''
}
const handConfirmCreat = async () => {
  if (!groupName.value) {
    msgError('请输入分组名称')
    return
  }
  const check = await formApi.checkGroupName({
    id: '',
    name: groupName.value
  })
  if (!check.success) {
    msgError(check.msg)
    return
  }
  const { success, msg } = await formApi.createGroup({
    name: groupName.value
  })
  if (success) {
    handCancelCreat()
    getGroups()
  }
  else {
    msgError(msg)
  }
}
const handleClose = () => {
  emits('update:modelValue', false)
  handCancelCreat()
}

const handCreateGroup = () => {
  showInput.value = true
}

const handConfirm = async () => {
  const active = gorupData.value.find((item: { id: string; }) => item.id === activeGroup.value)
  const param = {
    formGroupId: active.id,
    formId: props.data.id
  }
  const { msg, success } = !enable.value ? await formApi.enableForm(param) : await formApi.moveForm(param)
  if (success) {
    emits('update:modelValue', false)
    emits('requery', true)
    msgSuccess(msg)
  }
  else {
    msgError(msg)
  }
}
</script>

<template>
  <el-dialog
    v-model="isShow"
    class="iflow_base-move-modal"
    draggable
    :title="title"
    width="500"
    @close="handleClose"
  >
    <Transition name="fade">
      <el-radio-group v-model="activeGroup">
        <el-radio
          v-for="item in gorupData"
          :key="item.id"
          :label="item.id"
          size="large"
          :class="{ 'is-default': item.id === data?.groupId }"
          border
        >
          {{ item.name }}
        </el-radio>
      </el-radio-group>
    </Transition>
    <el-input
      v-if="showInput"
      v-model.trim="groupName"
      :max-length="12"
      placeholder="请输入分组名称"
      class="input-with-select"
    >
      <template #append>
        <el-button text type="primary" @click="handCancelCreat">取消</el-button>
        <el-divider direction="vertical" />
        <el-button text type="primary" @click="handConfirmCreat">保存</el-button>
      </template>
    </el-input>
    <template #footer>
      <el-button :icon="Plus" @click="handCreateGroup">新建分组</el-button>
      <div>
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handConfirm">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss">
.iflow_base-move-modal {
  .el-radio-group{
    flex-direction: column;
    width: 100%;

    .el-radio.is-bordered.el-radio--large{
      width: 100%;
      margin-right: 0;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-direction: row-reverse;

      &.is-default::after{
        content: '当前所在组';
        display: inline-block;
        position: absolute;
        right: 7px;
        background: #ededed;
        padding: 2px 3px;
        border-radius: 4px;
        font-size: 12px;
      }
    }
  }

  .el-dialog__footer {
    display: flex;
    justify-content: space-between;
  }

  .el-dialog__body{
    .el-input-group__append {
       .el-button{
        margin: 0;
        color: var(--el-color-primary);

        &:hover{
          opacity: 0.8;
        }
      }
    }
  }
}
</style>
